/*
 * @ddescription: 自营订单列表/物流发货
 * @Author: along
 * @Date: 2020-10-27
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-09 17:29:46
 */
<template>
    <div
        class="logisticsDelevery"
        v-if="dialogLogistics"
    >
        <el-dialog
            :title="TYPE == 1 ? '确认发货' : '补发'"
            :visible.sync="dialogLogistics"
            width="640px"
            :close-on-click-modal="false"
        >
            <p class="delevery_title">
                收件人信息
            </p>
            <div class="delevery_item">
                <p class="item_title">
                    收件人:
                </p>
                <p class="item_content">
                    {{ user_name ? user_name : '--' }}
                </p>
            </div>
            <div class="delevery_item">
                <p class="item_title">
                    手机号码:
                </p>
                <p class="item_content">
                    {{ phone ? phone : '--' }}
                </p>
            </div>
            <div class="delevery_item">
                <p class="item_title">
                    收件地址:
                </p>
                <p class="item_content">
                    {{ detail_info ? detail_info : '--' }}
                </p>
            </div>
            <p class="delevery_info">
                物流信息
            </p>
            <div :style="{marginTop: '20px'}">
                <div
                    v-for="(row,index) in ruleForm"
                    :key="index"
                >
                    <div class="_wrap">
                        <div class="_header">
                            <p class="_title">
                                物流信息{{ index | filterIndex }}
                            </p>
                            <p
                                class="_delete"
                                @click="removeDelivery(index)"
                                v-if="index > 0"
                            >
                                删除
                            </p>
                        </div>
                        <div class="item_list">
                            <p class="item_list_title">
                                快递公司
                            </p>
                            <el-autocomplete
                                v-model="row.logistics_name"
                                :fetch-suggestions="querySearchAsync"
                                placeholder="请选择选择快递公司"
                                @select="handleSelect($event, row)"
                                @blur="fnClearIpt(index)"
                                size="small"
                                :style="{width: '444px'}"
                            />
                        </div>
                        <div class="item_list">
                            <p class="item_list_title">
                                快递单号
                            </p>
                            <el-input
                                v-model="row.tracking_no"
                                placeholder="请填写快递单号"
                                size="small"
                                clearable
                                :style="{width: '444px'}"
                            />
                        </div>
                        <p
                            class="item_line"
                            v-if="index !== ruleForm.length - 1"
                        />
                    </div>
                </div>
            </div>
            <div class="_log">
                <p class="_log_line" />
                <p
                    class="_log_add"
                    @click="addLogistic()"
                >
                    添加快递单号（最多可添加10个物流单号）
                </p>
            </div>

            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogLogistics = false"
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    @click="fnSubmit"
                    :style="{width: '120px'}"
                >
                    确认发货
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'LogisticsDelivery',
    data () {
        return {
            TYPE: '',
            user_name: '',
            phone: '',
            detail_info: '',
            order_no: '',//订单编号
            dialogLogistics: false,
            ruleForm: [{ //快递公司和编号 支持多个
                logistics_no: '',
                tracking_no: '',
                logistics_name: ''
            }],
            timeout: '',
            iptResult: '',
            expressRm: [],
            expressAll: [],
            tracking_info_list: []
        };
    },
    watch: {
        dialogLogistics (val) {
            if(!val) {
                this.ruleForm = [{
                    logistics_no: '',
                    tracking_no: ''
                }];
            }
        }
    },
    mounted () {
        this.getExpress(1, resp => {
            this.restaurants = resp;
            this.expressRm = resp;
        });
        this.getExpress(0, resp => {
            this.expressAll = resp;
        });
    },
    filters: {
        filterIndex (val) {
            if(val === 0) return '一';
            if(val === 1) return '二';
            if(val === 2) return '三';
            if(val === 3) return '四';
            if(val === 4) return '五';
            if(val === 5) return '六';
            if(val === 6) return '七';
            if(val === 7) return '八';
            if(val === 8) return '九';
            if(val === 9) return '十';
        }
    },
    methods: {
        /**
         * @description 打开弹窗
         *      type: 1: 确认发货 2:补发 只做弹窗文案区分
         */
        show (type, tracking_info_list = []) {
            this.TYPE = type;
            this.dialogLogistics = true;

            if(type === '2') {
                this.tracking_info_list = tracking_info_list;
            }
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogLogistics = false;
        },

        /**
         * @description 设置订单编号
         */
        setData (row) {
            this.order_no = row.order_no;
            this.user_name = row.user_name;
            this.phone = row.phone;
            this.detail_info = row.detail_info;
        },

        /**
         * @description 添加快递单号
         */
        addLogistic () {
            if(this.TYPE == '2' && (Number(this.ruleForm.length) + Number(this.tracking_info_list.length) == 10)) {
                this.$notify({
                    title: '警告',
                    message: '最多只可以添加10个物流单号',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            if(this.ruleForm.length == 10) {
                this.$notify({
                    title: '警告',
                    message: '最多只可以添加10个物流单号',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            this.ruleForm = this.ruleForm.concat([{
                logistics_no: '',
                tracking_no: ''
            }]);

            this.$nextTick(() => {
                document.querySelector('.el-dialog__body').scrollTop = 9999;
            });

        },

        //删除
        removeDelivery (index) {
            this.ruleForm = this.ruleForm.splice(index, 1);
        },

        /**
         * @description 确认发货
         */
        fnSubmit () {
            for(let key=0; key<this.ruleForm.length; key++){
                if(this.ruleForm[key].logistics_name == '') {
                    this.$notify({
                        title: '警告',
                        message: '快递公司不可以为空',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
                if(this.ruleForm[key].tracking_no == '') {
                    this.$notify({
                        title: '警告',
                        message: '快递单号不可以为空',
                        duration: 2000,
                        type: 'warning'
                    });
                    return false;
                }
            }

            let tracking_info = this.ruleForm.reduce((cur,next) => {
                cur.push({
                    logistics_no: next.logistics_no,
                    tracking_no: next.tracking_no
                });
                return cur;
            },[]);

            this.$post('/ShopGoodsOrder/setTrackingInfo', {
                order_no: this.order_no,
                tracking_info: this.TYPE == '1' ? JSON.stringify(tracking_info) : JSON.stringify(tracking_info.concat(this.tracking_info_list))
            }, resp => {
                if (resp.code == 1) {
                    this.$emit('update');
                    this.dialogLogistics = false;
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 物流搜索
         */
        querySearchAsync(queryString, cb) {
            var restaurants = null;

            if (queryString == '' || queryString == null) {
                restaurants = this.expressRm;
            } else {
                restaurants = this.expressAll;
            }
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            this.iptResult = results;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 200 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item, row) {
            this.$set(row, 'logistics_no', item.address);
        },
        fnClearIpt (index) {
            if (this.iptResult.length == 0) {
                this.ruleForm[index]['logistics_no'] = '';
            }
        },

        /**
         * @description 获取物流公司信息
         */
        getExpress (no, callback) {
            this.$post('/Logistics/getList', {
                type: no
            }, resp=>{
                if (resp.code == 1) {
                    let list = [];

                    resp.data.list.map((item,index)=>{
                        list.push({
                            value: item.name,
                            address: item.logistics_no
                        });
                    });
                    callback(list);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.logisticsDelevery {
    display: flex;
    flex-direction: column;
    .delevery_title {
        color: #333;
        font-size: 14px;
        font-weight: 500;
    }
    .delevery_item {
        margin-top: 24px;
        display: flex;
        align-items: center;
        .item_title {
            color: #888;
            font-size: 14px;
            margin-right: 8px;
        }
        .item_content {
            color: #333;
            font-size: 14px;
            white-space: nowrap;
        }
    }
    .delevery_info {
        color: #333;
        font-size: 14px;
        font-weight: 500;
        margin-top: 42px;
    }
    ._wrap {
        width: 512px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        margin-bottom: 10px;
        background: rgba(250, 250, 250, 1);
        padding: 16px 16px 20px 16px;
        border-radius: 4px;
        ._header {
            height: 15px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            ._title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
            }
            ._delete {
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                cursor: pointer;
                font-weight: 500;
            }
        }
    }
    .item_list {
        height: 32px;
        display: flex;
        margin-top: 24px;
        align-items: center;
        .item_list_title {
            color: #666;
            font-size: 14px;
            margin-right: 12px;
            white-space: nowrap;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
    .item_line {
        border-top: 1px #eeeeee solid;
        margin-top: 24px;
        width: 100%;
    }
    ._log {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 24px;
        ._log_add {
            height: 24px;
            font-size: 14px;
            cursor: pointer;
            color: #66b1ff;
        }
    }
}
</style>

<style lang="less">
.logisticsDelevery {
    .el-dialog__body {
        padding-bottom: 32px;
        max-height: 500px;
        overflow: hidden;
        overflow-y: auto;
    }
    .el-dialog__footer {
        padding-top: 0;
        padding-bottom: 36px;
    }
}
</style>